<style scoped>
.contain {
  background: #fff;
  border: 1px solid #e5ebec;
  padding: 20px;
}
.basicInfo,
.fusions,
.mutations {
  background: #fff;
  border: 1px solid #e5ebec;
  color: #000;
  padding: 0 10px;
}
.fusions {
  margin: 20px 0;
  padding: 15px 10px;
}
.mutations {
  padding: 15px 10px;
}
.basicInfo {
  display: flex;
}
.basicInfo-left,
.basicInfo-right {
  flex: 1;
  float: left;
}
.basicInfo-left + .basicInfo-right {
  margin-left: 40px;
}
.basicInfo-left > div,
.basicInfo-right > div {
  padding: 15px 0;
  border-bottom: 1px dashed #e5ebec;
}
.basicInfo-left > div:last-of-type,
.basicInfo-right > div:last-of-type {
  border-bottom: none;
}
.basicInfo-left span,
.basicInfo-right span {
  padding-left: 10px;
}
.ivu-layout {
  padding: 20px;
}
.mutations font span:last-of-type span{
    display: none;
}
.ivu-spin-fix{
    z-index: 999;
}
</style>

<template>
  <div style="background:#f5f7f9;width:100%;overflow:hidden;overflow-y:scroll;">
    <Layout>
      <div class="contain">
        <div class="basicInfo">
          <div class="basicInfo-left">
            <div>
              Patient Relevant Sample :
              <span>{{sampleData.PATIENT_RELEVANT_SAMPLES}}</span>
            </div>
            <div>
              <p>
                Patient_ID :
                <span>{{sampleData.PATIENT_ID}}</span>
              </p>
              <p>
                Sample_ID :
                <span>{{sampleData.SAMPLE_ID}}</span>
              </p>
            </div>
            <div>
              Grade :
              <span>{{sampleData.GRADE}}</span>
            </div>
            <div>
              <p>
                Cancer_Type :
                <span>{{sampleData.CANCER_TYPE}}</span>
              </p>
              <p>
                Cancer_Type_Detailed :
                <span>{{sampleData.CANCER_TYPE_DETAILED}}</span>
              </p>
            </div>
            <div>
              DNA_Input :
              <span>{{sampleData.DNA_INPUT}}</span>
            </div>
            <div>
              Matched_Status :
              <span>{{sampleData.MATCHED_STATUS}}</span>
            </div>
            <div>
              Metastatic_Site :
              <span>{{sampleData.METASTATIC_SITE}}</span>
            </div>
          </div>
          <div class="basicInfo-right">
            <div>
              Oncotree_Code :
              <span>{{sampleData.ONCOTREE_CODE}}</span>
            </div>
            <div>
              Primary_Site :
              <span>{{sampleData.PRIMARY_SITE}}</span>
            </div>
            <div>
              <p>
                Sample_Class :
                <span>{{sampleData.SAMPLE_CLASS}}</span>
              </p>
              <p>
                Sample_Coverage :
                <span>{{sampleData.SAMPLE_COVERAGE}}</span>
              </p>
              <p>
                Sample_Type :
                <span>{{sampleData.SAMPLE_TYPE}}</span>
              </p>
            </div>
            <div>
              <p>
                Specimen_Preservation_Type :
                <span>{{sampleData.SPECIMEN_PRESERVATION_TYPE}}</span>
              </p>
              <p>
                Specemen_Type :
                <span>{{sampleData.SPECIMEN_TYPE}}</span>
              </p>
            </div>
            <div>
              <p>
                Tumor_Purity :
                <span>{{sampleData.TUMOR_PURITY}}</span>
              </p>
              <p>
                Tumor_Type :
                <span>{{sampleData.TUMOR_TYPE}}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="fusions">
          Fusions :
          <span style="padding-left:10px;">{{fusions}}</span>
        </div>
        <div class="mutations">
          Mutations :
          <font color="#0283cc">
            <span v-for="(item,index) in mutations" :key="index" @click="toMutation(item)">
              <u>{{item | formatDate}}</u>
              <span style="padding:0 5px">,</span>
            </span>
          </font>
        </div>
      </div>
    </Layout>
    <Spin fix v-if='loading' size="large"></Spin>
  </div>
</template>
<script>
import { varca } from "@/api/index";
export default {
  data() {
    return {
      sampleInfo: {},
      sampleData: {},
      fusions: "",
      loading:true,
      mutations: [
        //                 'ZNF252 *82* 0%',
        //     'SMTNL1 X360_splice 0%',
        // 'SLC1A7 K259M 0%',
        // 'TMEM11 *21* 0%',
        // 'ST6GALNAC3 G165V 0%',
        // 'S1PR3 R311H 96.87%',
        // 'RBPJL V420M 0%',
        // 'PCDHAC2 G73W 0%',
        // 'FAM47A A101V 0%',
        // 'EPB41L4B P233L 0%',
        // 'CREBBP R1446C 0%',
        // 'CNOT1 R2209C 0%',
        // 'CACNA1D A1268T 0%',
        // 'ANGEL2 R387W 0%'
      ]
    };
  },
  methods: {
    getsampleData() {
        this.loading=true;
      let obj = {
        sample: this.sampleInfo.sample,
        sampleId: this.sampleInfo.sampleID,
        study: this.sampleInfo.study
      };
      varca.findSamples(obj).then(res => {
        if (res.status == 200) {
            if(res.data.data.sample){
                this.sampleData = res.data.data.sample;
            }
            if(res.data.data.fusions.length>0){
                this.fusions = res.data.data.fusions[0].Fusion;
            }
            if(res.data.mutations){
                this.mutations = res.data.mutations;
                // this.mutations = res.data.data.mutations;
            }
            this.loading=false;
        }else if (res.status == 203){
          this.getsampleData()
        }
      });
    },
    toMutation(data){
        this.$store.state.mutationData=data;
        this.$router.push('/VariantLocusMutation')
    }
  },
  mounted() {
    this.sampleInfo = this.$store.state.sampleInfo;
    this.getsampleData();
  },
  filters: {
    formatDate(data) {
      function toPercent(point) {
        var y = String(point).indexOf(".");
        var str;
        var count;
        if (y == -1) {
          str = Number(point * 100);
        } else {
          count = String(point).length - y;
          if (count >= 2) {
            str = Number(point * 100).toFixed(2);
          } else if (count == 1) {
            str = Number(point * 100).toFixed(1);
          }
        }

        str += "%";
        return str;
      }
      let freq = toPercent(data.freq);
      let str = data.gene + " " + data.mutation + " " + freq;
      return str;
    }
  }
};
</script>

